<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
	xsi:schemaLocation="http://dei.uc.pt/eai/assignment1 http://bica-nelson-rufino.googlecode.com/svn/trunk/P1-XML/assignment1.xsd"
	xmlns:a1="http://dei.uc.pt/eai/assignment1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html" />
	<xsl:template match="/a1:cards">
		<html>

			<!-- PAGE TITLE -->
			<title>Graphic Cards</title>

			<!-- HEAD WITH CSS -->
			<head>
				<style type="text/css">
					<!-- BODY -->
					body
					{
					background-color:#d0e4fe;
					font-family:"Helvetica";
					}

					<!-- PAGE HEADER -->
					h1
					{
					color:#777777;
					text-align:center;
					font-size:36px;
					}

					<!-- ALL TABLES -->
					table
					{
					color:#333333;
					}

					<!-- MAIN TABLE -->
					table#main
					{
					border:3px solid #98bf21;
					width:70%;
					background-color:#FFFFFF;
					font-size:17px;
					}
					table#main td#card
					{
					width="40%";
					text-align:center;
					font-size:24px;
					padding:10px;
					vertical-align:center;
					}
					table#main
					td#dataLeft, table#main
					td#dataRight, table#main
					td#rating
					{
					width="20%";
					padding:10px;
					vertical-align:top;
					}
					table#main
					td#dataLeft, table#main
					td#rating
					{
					font-weight:bold;
					}
					table#main
					td#rating div#rating
					{
					font-size:12px;
					font-weight:normal;
					}

					<!-- IMAGE -->
					img
					{
					width:250px;
					}

					<!-- RATING BARS -->
					.ratingBar{
					height:10px;
					background-color:#FFFF00;
					font-size:0px;
					text-align:left;
					}

					<!-- DETAILS TABLE -->
					table#detail
					{
					border:3px solid #FFAA00;
					width:100%;
					background-color:#DDDDDD;
					color:#000000;
					font-size:14px;
					}
					table#detail td#detailLeft
					{
					width:170px;
					font-style:italic;
					}
					table#detail
					td#detailRight
					{
					width:230px;
					}

					<!-- DETAILS HOVER -->
					span.link {
					position:
					relative;
					}
					span.link
					a span {
					display: none;
					}
					span.link
					a:hover, span.link a:link, span.link a:active, span.link
					a:visited {
					font-size: 99%;
					color:#000000;
					}
					span.link
					a:hover span
					{
					display:block;
					position:absolute;
					margin-top:10px;
					margin-left:0px;
					width:400px;
					padding:5px;
					z-index:100;
					background:#FFFFFF;
					}
				</style>


			</head>

			<!-- START OF DOCUMENT BODY -->

			<body>
				<h1>
					List of Graphic Cards
				</h1>

				<center>

					<xsl:for-each select="card">
						<table id="main" border="1">
							<tr>

								<!-- CARD AND IMAGE -->
								<td id="card">
									<a>
										<xsl:attribute name="href"><xsl:value-of
											select="@url" /></xsl:attribute>
										<xsl:value-of select="graphicCardName" />
									</a>
									<br />
									<img>
										<xsl:attribute name="src"><xsl:value-of
											select="imageFileUrl" /></xsl:attribute>

									</img>
								</td>

								<!-- CARD INFO TITLES-->
								<td id="dataLeft">
									Manufacturer
									<br />
									Series
									<br />
									GPU
									<br />
									Release Date
									<br />
									Interface
									<br />
									Core Clock
									<br />
									Memory Clock
									<br />
									Memory Bandwidth
									<br />
									Shader Operations
									<br />
									Pixel Fill Rate
									<br />
									Texture Fill Rate
									<br />
									Vertex Operations
								</td>

								<!-- CARD INFO DATA -->
								<td id="dataRight">
									<xsl:value-of select="manufacturer" />
									<br />
									<xsl:value-of select="series" />
									<br />
									<xsl:value-of select="GPU" />
									<br />
									<xsl:value-of select="releaseDate" />
									<br />
									<xsl:value-of select="interface" />
									<br />
									<xsl:value-of select="coreClock" />
									<br />
									<xsl:value-of select="memoryClock" />
									<br />
									<xsl:value-of select="memoryBandwidth" />
									<br />
									<xsl:value-of select="shaderOperations" />
									<br />
									<xsl:value-of select="pixelFillRate" />
									<br />
									<xsl:value-of select="textureFillRate" />
									<br />
									<xsl:value-of select="vertexOperations" />
									<br />
									<br />

									<!-- CARD DETAILS -->
									<span class="link">
										<a href="javascript: void(0)">
											More details...
											<span>
												<table id="detail">
													<tr>
														<td id="detailLeft">
															Noise Level
															<br />
															Framebuffer
															<br />
															Memory Type
															<br />
															Memory Bus Type
															<br />
															DirectX Compliance
															<br />
															OpenGL Compliance
															<br />
															PS/VS Version
															<br />
															Process
															<br />
															Fragment Pipelines
															<br />
															Vertex Pipelines
															<br />
															Texture Units
															<br />
															Raster Operators
														</td>

														<td id="detailRight">
															<xsl:value-of select="details/noiseLevel" />
															<br />
															<xsl:value-of select="details/framebuffer" />
															<br />
															<xsl:value-of select="details/memoryType" />
															<br />
															<xsl:value-of select="details/memoryBusType" />
															<br />
															<xsl:value-of select="details/directXCompliance" />
															<br />
															<xsl:value-of select="details/openGLCompliance" />
															<br />
															<xsl:value-of select="details/psvsVersion" />
															<br />
															<xsl:value-of select="details/process" />
															<br />
															<xsl:value-of select="details/fragmentPipelines" />
															<br />
															<xsl:value-of select="details/vertexPipelines" />
															<br />
															<xsl:value-of select="details/textureUnits" />
															<br />
															<xsl:value-of select="details/rasterOperators" />
															<br />
														</td>
													</tr>
												</table>
											</span>
										</a>
									</span>
								</td>

								<!-- RATINGS -->
								<td id="rating">
									User Ratings
									<br />
									<br />
									<div id="rating">
									
										<!-- OVERALL RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingOverall * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Overall:
										<xsl:value-of select="details/gpuRatingOverall" />
										(
										<xsl:value-of select="details/gpuRatingOverallVotes" />
										votes)
										<br />
										<br />

										<!-- PERFORMANCE RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingPerformance * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Performance:
										<xsl:value-of select="details/gpuRatingPerformance" />
										(
										<xsl:value-of select="details/gpuRatingPerformanceVotes" />
										votes)
										<br />
										<br />

										<!-- PRICE RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingPrice * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Price:
										<xsl:value-of select="details/gpuRatingPrice" />
										(
										<xsl:value-of select="details/gpuRatingPriceVotes" />
										votes)
										<br />
										<br />

										<!-- FEATURES RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingFeatures * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Features:
										<xsl:value-of select="details/gpuRatingFeatures" />
										(
										<xsl:value-of select="details/gpuRatingFeaturesVotes" />
										votes)
										<br />
										<br />

										<!-- OVERCLOCKABILITY RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingOverclockability * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Overclockability:
										<xsl:value-of select="details/gpuRatingOverclockability" />
										(
										<xsl:value-of select="details/gpuRatingOverclockabilityVotes" />
										votes)
										<br />
										<br />

										<!-- SILENCE RATING -->
										<div class="ratingBar">
											<xsl:attribute name="style">
												<xsl:text>width:</xsl:text>
												<xsl:value-of select="details/gpuRatingSilence * 10" />
												<xsl:text>%;</xsl:text>
											</xsl:attribute>
										</div>
										Silence:
										<xsl:value-of select="details/gpuRatingSilence" />
										(
										<xsl:value-of select="details/gpuRatingSilenceVotes" />
										votes)
										
									</div>
								</td>
							</tr>
						</table>
						<br />
						<br />

					</xsl:for-each>

				</center>

			</body>
		</html>

	</xsl:template>
</xsl:stylesheet>